<template>
  <div class="tlj">
    <div class="tlj_main">
      <header>
        <div class="header_main">
          <div class="header_left">
            <div>
              <v-btn text small color="#5490ff">
                <i class="iconfont icon-main"></i>首页</v-btn
              >
            </div>

            <div class="my-2" v-if="!logined">
              <v-btn text small color="#999"
                ><router-link to="/user/login">登录</router-link>
              </v-btn>
              <v-btn text small color="#999"
                ><router-link to="/user/register">注册</router-link></v-btn
              >
            </div>
            <div v-else style="display:flex;align-items:center">
              <span style="padding-top:4px">欢迎您! {{ username }}</span>
              <v-btn text small color="#999" @click="dialog = true">退出</v-btn>
            </div>
          </div>
          <div class="header_right">
            <!-- <v-btn text small color="#999">我的收藏</v-btn>
            <v-btn text small color="#999">商家服务</v-btn>
            <v-btn text small color="#999">招商入驻</v-btn> -->
          </div>
        </div>
      </header>
      <nav>
        <!-- <div class="nav_top">
          <logo></logo>
          <div class="nav_search">
            <div class="search_top">
              <v-text-field
                style="width:400px;border-top-right-radius: 0;border-bottom-right-radius: 0;"
                v-model.trim="searchipt"
                label="请输入搜索内容!"
                clearable
                single-line
                outlined
                dense
                hide-details
                height="40px"
              ></v-text-field>
              <v-btn
                color="primary"
                @click="dosearch"
                depressed
                width="100px"
                height="42px"
                style="border-top-left-radius: 0;border-bottom-left-radius: 0;padding:0 8px;"
              >
                <i class="iconfont icon-search" style="margin-right:5px"></i> 搜
                索</v-btn
              >
            </div>
            <div class="search_hot">
              <a @click="hotSearch('拖鞋')" href="#">拖鞋</a>
              <a @click="hotSearch('睡衣')" href="#">睡衣</a>
              <a @click="hotSearch('手套')" href="#">手套</a>
              <a @click="hotSearch('加湿器')" href="#">加湿器</a>
              <a @click="hotSearch('羽绒服')" href="#">羽绒服</a>
              <a @click="hotSearch('耳机')" href="#">耳机</a>
            </div>
          </div>
          <div style="width:330px;height:75px;">
            <v-carousel hide-delimiters height="75px" show-arrows-on-hover>
              <v-carousel-item
                v-for="(item, i) in items"
                :key="i"
                :src="item.src"
              ></v-carousel-item>
            </v-carousel>
          </div>
        </div> -->
        <div class="nav_top2">
          乐推首单礼金
        </div>
        <div class="nav_bar">
          <v-divider light></v-divider>
          <div class="nav_tabs">
            <v-tabs
              v-model="vtabs"
              @change="tabschange"
              active-class="tabsactive"
            >
              <v-tabs-slider color="transparent"></v-tabs-slider>
              <v-tab>首单礼金</v-tab>
              <!-- <v-divider light inset vertical></v-divider>
              <v-tab>产品库</v-tab>
              <v-divider light inset vertical></v-divider>
              <v-tab>实用工具</v-tab>
              <v-divider light inset vertical></v-divider>
              <v-tab>新手教程</v-tab>
              <v-divider light inset vertical></v-divider> -->
            </v-tabs>
          </div>
        </div>
      </nav>
      <div class="tlj_content">
        <router-view />
      </div>
      <v-dialog v-model="dialog" max-width="350">
        <v-card>
          <v-card-title class="headline">Sorry,您是否要退出登录?</v-card-title>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" text @click="dialog = false">
              取消
            </v-btn>
            <v-btn color="blue darken-1" text @click="dologinout">
              确认
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
// import logo from "@/components/logo.vue";

export default {
  name: "Tlj",
  components: {
    // logo
  },
  data() {
    return {
      dialog: false,
      username: Vue.ls.get("username"),
      logined: Vue.ls.get("username") ? true : false,
      searchipt: "",
      vtabs: "1",
      items: [
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
        }
      ]
    };
  },

  computed: {},
  created() {},
  mounted() {},
  methods: {
    dologinout() {
      Vue.ls.clear();
      this.$router.push({
        path: "/user/login"
      });
      this.$message({
        type: "success",
        message: "已退出登录!"
      });
    },
    tabschange() {
      console.log(this.vtabs);
    },
    dosearch() {
      console.log(this.searchipt);
    }
  }
};
</script>

<style lang="scss" scoped>
$text-field-filled-full-width-outlined-slot-min-height: 40px;
.tlj {
  width: 100%;
  .tlj_main {
    header {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #f8f8f8;
      .header_main {
        width: 1280px;
        height: 40px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header_left {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .header_right {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    nav {
      width: 100%;
      position: relative;
      .nav_bar::v-deep {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        box-shadow: 0 9px 9px 0 hsla(0, 0%, 0%, 0.1);
        margin-bottom: 10px;
        .theme--light.v-divider {
          border-color: #f2f2f2;
        }
      }
      .nav_top {
        width: 1280px;
        margin: 0 auto;
        padding: 27px 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .nav_search {
          .search_top::v-deep {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .v-input__control {
              height: 40px;
            }
          }
          .search_hot {
            margin-top: 8px;
            a {
              margin: 0 2px;
            }
          }
        }
      }
      .nav_tabs {
        width: 1280px;
        margin: 0 auto;
        .tabsactive::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 39px;
          height: 4px;
          background: #4d75ff;
          border-radius: 2px 2px 0 0;
          transform: translateX(-50%);
        }
      }
      .nav_top2 {
        font-size: 40px;
        font-weight: 600;
        padding: 30px 25px 67px 25px;
      }
    }
  }
  .tlj_content {
    margin-top: -10px;
  }
}
</style>
